<template>
  <!-- apk详情 -->
  <div>
    <el-dialog
      title="APK详情"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="50%"
    >
      <div class="apk-detail-content">
        <el-card class="box-card">
          <div
            slot="header"
            class="clearfix"
          >
            <span>基础信息</span>
          </div>
          <el-row
            :gutter="20"
            class="form"
          >
            <el-col :span="5">
              <div class="grid-content bg-purple">
                名称：Faceu激萌
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">
                作者：admin
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                下载时间：2020.2.20 20:20
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                更新时间：2023.04.06 18:18
              </div>
            </el-col>
          </el-row>
          <el-row
            :gutter="20"
            class="form"
          >
            <el-col :span="5">
              <div class="grid-content bg-purple">
                文件大小：2MB
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple">
                状态：已安装
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                版本号：1.50
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                路径：/user/home/test/picture
              </div>
            </el-col>
          </el-row>
        </el-card>
        <!-- 下面部分 -->
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
        >
          <!-- 应用权限列表 -->
          <el-tab-pane
            label="应用权限列表"
            name="first"
          >
            <el-row
              :gutter="20"
              class="form"
            >
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  查看网络状态
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  允许应用程序查看所有网络的状态。
                </div>
              </el-col>
            </el-row>
            <el-row
              :gutter="20"
              class="form"
            >
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  查看WLAN状态
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  允许应用程序查看有关WLAN状态的信息。
                </div>
              </el-col>
            </el-row>
            <el-row
              :gutter="20"
              class="form"
            >
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  更改网络连接性
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  允许应用程序更改网络连接的状态。
                </div>
              </el-col>
            </el-row>
            <el-row
              :gutter="20"
              class="form"
            >
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  访问网络
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  允许程序访问网络。
                </div>
              </el-col>
            </el-row>
            <el-row
              :gutter="20"
              class="form"
            >
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  对正在运行的应用程序重新排序
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  允许应用程序将任务移至前端和后台。恶意程序可借此机会进入前端，而不受您的控制。
                </div>
              </el-col>
            </el-row>
            <el-row
              :gutter="20"
              class="form"
            >
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  控制振动器
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  充许应用程序控制振动器。
                </div>
              </el-col>
            </el-row>
            <el-row
              :gutter="20"
              class="form"
            >
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  修改存储内容
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  允许应用程序写入。
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <!-- //风险列表 -->
          <el-tab-pane
            label="风险列表"
            name="second"
          >
            <el-row
              :gutter="20"
              class="form"
            >
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  个人信息泄露
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  未经用户许可，越权访问手机通讯录、短信信息。
                </div>
              </el-col>
            </el-row>
            <el-row
              :gutter="20"
              class="form"
            >
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  位置信息泄露
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  未经用户许可，私自上传用户位置信息。
                </div>
              </el-col>
            </el-row>
            <el-row
              :gutter="20"
              class="form"
            >
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  WiFi热点信息泄露
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  未经用户许可记录、上传手机中的WiFi热点信息。
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="handleClose"
        >删除</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "DetailsDialog",
  props: { dialogShow: Boolean },
  data() {
    return {
      activeName: "first",
      dialogVisible: false,
      // dialogVisible: false,
    };
  },
  watch: {
    dialogShow(newVal, oldVal) {
      console.log(newVal, oldVal);
      this.dialogVisible = newVal;
    },
  },
  methods: {
    handleClose() {
      console.log("关闭");
      this.dialogVisible = false;
      this.$emit("hideDetailsDialog", false);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style scoped>
.form {
  margin-bottom: 20px;
}
</style>